
<template>
  <el-container style="height: 100vh">
    <!-- 顶部导航栏 -->
<!--    <el-header class="top-nav">-->
<!--      <h2 class="title">和谐大功率机车车载数据专家分析系统 - 专家分析</h2>-->
<!--    </el-header>-->
    <el-container>
      <el-aside class="sidebar" style="overflow-y: auto; height: 100vh;">
        <el-menu
          :default-openeds="['1']"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(menu, index) in menuItems"
            :key="index"
            :index="menu.index"
            @click="handleMenuItemClick(menu.label)"
          >
            <i :class="menu.icon" />
            <span slot="title">{{ menu.label }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="main-content">
        <el-row :gutter="20">
          <el-col :span="18">
            <el-row >
              <TrainExpertInfo />
            </el-row>
            <el-row  >
              <TrainExpertTable />
            </el-row>
          </el-col>
          <el-col :span="6">
            <TrainAnalysisList />
          </el-col>
        </el-row>
      </el-main>
      <!-- 添加弹出窗口 -->
      <el-dialog
        title="请输入查询条件"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div>
          <p>起始时间：</p>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
          <p>终止时间：</p>
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="请输入查询条件"
        :visible.sync="dialogVisible_train"
        width="30%"
      >
        <div>
          <el-form :model="queryConditions">
            <el-form-item label="车型">
              <el-select v-model="queryConditions.carType" placeholder="请选择车型">
                <!-- 这里添加车型的选项 -->
                <el-option label="HXD2" value="HXD2" />
                <el-option label="HXD3B" value="HXD3B" />
                <!-- 其他车型选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="车号">
              <el-select v-model="queryConditions.carNumber" placeholder="请选择车号">
                <!-- 这里添加车号的选项 -->
                <el-option label="2067B" value="2067B" />
                <el-option label="5678" value="5678" />
                <!-- 其他车号选项 -->
              </el-select>
            </el-form-item>
            <el-form-item label="起始时间">
              <el-date-picker
                v-model="queryConditions.startDate"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
            <el-form-item label="终止时间">
              <el-date-picker
                v-model="queryConditions.endDate"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_train = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :visible.sync="reportDialogVisible"
        width="50%"
      >
        <div id="report-content">
          <el-descriptions title="车载数据下载专家诊断报告" :column="3" border>
            <el-descriptions-item label="车型">{{ report.model }}</el-descriptions-item>
            <el-descriptions-item label="车号">{{ report.number }}</el-descriptions-item>
            <el-descriptions-item label="整备日期">{{ report.date }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions direction="vertical" :column="1" border>
            <el-descriptions-item label="故障分析结果">
              <div v-for="(fault, index) in report.faults" :key="index">
                <p>{{ fault.description }}</p>
                <p>发生时间: {{ fault.times.join(', ') }}</p>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="建议事项">
              <div v-for="(fault, index) in report.faults" :key="index">
                <p>{{ fault.suggestion }}</p>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="printReport">打印</el-button>
          <el-button @click="reportDialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="日期选择"
        :visible.sync="dialogVisible_date"
        width="30%"
      >
        <div>
          <p>日期选择：</p>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_date = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="结果确认"
        :visible.sync="dialogVisible_result"
        width="70%"
      >
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="起始时间">
            <el-date-picker v-model="startTime" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="终止时间">
            <el-date-picker v-model="endTime" type="date" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="最多个数">
            <el-input v-model="maxCount" placeholder="输入数字" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData_result" style="width: 100%" border>
          <el-table-column prop="model" label="车型" width="100" />
          <el-table-column prop="number" label="车号" width="150" />
          <el-table-column prop="time" label="下载时间" width="180" />
          <el-table-column prop="opinion" label="处理意见" />
          <el-table-column prop="result" label="处理结果" />
          <el-table-column prop="analyst" label="分析人" width="100" />
          <el-table-column prop="analyzeTime" label="分析时间" width="180" />
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_result = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title=""
        :visible.sync="dialogVisible_overdue"
        width="70%"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>逾期未回机车列表</span>
          </div>
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="判定为逾期的最小未回间隔时间:">
              <el-input v-model="searchForm.days" placeholder="天数" />
            </el-form-item>
            <el-button type="primary" @click="onSearch">重置</el-button>
          </el-form>
          <el-table
            :data="tableData_overdue"
            style="width: 100%"
            :default-sort="{prop: '未返回时间(天)', order: 'ascending'}"
          >
            <el-table-column prop="机车类型" label="机车类型" sortable />
            <el-table-column prop="机车号" label="机车号" sortable />
            <el-table-column prop="最后返回时间" label="最后返回时间" sortable />
            <el-table-column prop="未返回时间(天)" label="未返回时间(天)" sortable />
          </el-table>
        </el-card>
      </el-dialog>
      <el-dialog
        title="按时间浏览"
        :visible.sync="dialogVisible_timebrow"
        width="70%"
      >
        <el-container>
          <el-aside width="200px">
            <el-tree :data="yearData" :props="defaultProps" @node-click="handleNodeClick" />
          </el-aside>
          <el-main>
            <el-row>
              <el-col :span="6">
                <el-radio-group v-model="tabType" @change="handleTabChange">
                  <el-radio-button label="两班制">两班制</el-radio-button>
                  <el-radio-button label="三班制">三班制</el-radio-button>
                </el-radio-group>
              </el-col>
              <el-col :span="6">
                <p>注意：重新打开本页面有效。</p>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-dialog>
      <el-dialog
        title="图形分析"
        :visible.sync="dialogVisible_graph"
        width="90%"
      >
        <el-container>
          <el-aside width="200px">
            <el-menu>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-circle-plus-outline" />
                  <span>HXD1</span>
                </template>
                <el-menu-item index="1-1">HXD1B</el-menu-item>
                <el-menu-item index="1-2">HXD1C</el-menu-item>
                <el-menu-item index="1-3">HXD1D</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-circle-plus-outline" />
                  <span>HXD2</span>
                </template>
                <el-menu-item index="2-1">HXD2F</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-circle-plus-outline" />
                  <span>HXD3</span>
                </template>
                <el-menu-item index="3-1">HXD3C</el-menu-item>
                <el-menu-item index="3-2">HXD3D</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-aside>
          <el-main>
            <el-container>
              <el-header>
                <h1>大数据分析</h1>
                <div class="search-bar">
                  <el-date-picker
                    v-model="startTime_pic"
                    type="date"
                    placeholder="选择开始时间"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  />
                  <span>至</span>
                  <el-date-picker
                    v-model="endTime_pic"
                    type="date"
                    placeholder="选择结束时间"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  />
                  <el-button type="primary" icon="el-icon-search">搜索</el-button>
                </div>
              </el-header>
              <el-main style="margin-top: 50px">
                <el-tabs v-model="activeName" type="card">
                  <el-tab-pane label="数据" name="first">数据</el-tab-pane>
                  <el-tab-pane label="饼形图" name="second">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div>
                          <h3>解析事件比例图</h3>
                          <pie-chart :data="chartData" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <h3>事件xxx 机车辆故障比例图</h3>
                          <pie-chart :data="chartData" />
                        </div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div>
                          <h3>定位事件比例图</h3>
                          <pie-chart :data="chartData" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <h3>事件xxx 定位解析故障比例图</h3>
                          <pie-chart :data="chartData" />
                        </div>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="柱形图" name="third">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div>
                          <h3>解析事件比例图</h3>
                          <bar-chart :data="chartData" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <h3>事件xxx 机车辆故障比例图</h3>
                          <bar-chart :data="chartData" />
                        </div>
                      </el-col>
                    </el-row>
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div>
                          <h3>定位事件比例图</h3>
                          <bar-chart :data="chartData" />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div>
                          <h3>事件xxx 定位解析故障比例图</h3>
                          <bar-chart :data="chartData" />
                        </div>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-dialog>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible_dataout"
        width="30%"
      >
        <span>数据筛选导出</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_dataout = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible_dataout = false">确 定</el-button>
        </span>
      </el-dialog>

    </el-container>
  </el-container>
</template>

<script>
import TrainExpertInfo from './components/TrainExpertInfo'
import TrainExpertTable from './components/TrainExpertTable'
import TrainAnalysisList from './components/TrainAnalysisList'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'

export default {
  components: {
    TrainExpertInfo,
    TrainExpertTable,
    TrainAnalysisList,
    PieChart,
    BarChart
  },
  data() {
    return {
      activeName: 'first',
      startTime_pic: '',
      endTime_pic: '',
      chartData: {
        expectedData: [66, 33],
        actualData: ['BBB', 'AAA']
      },
      tabType: '两班制',
      treeData: [
        { label: '2000年' },
        { label: '2012年' },
        { label: '2013年' },
        { label: '2014年' }
      ],
      yearData: [
        {
          label: '2000年',
          children: [
            { label: '2012年' },
            { label: '2013年' },
            { label: '2014年' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      shiftType: 1,
      searchForm: {
        days: 30
      },
      tableData_overdue: [
        // 示例数据
        { 机车类型: 'HXD1', 机车号: '13868', 最后返回时间: '2017-10-31 13:30:20', 未返回时间: 2484 },
        { 机车类型: 'HXD1', 机车号: '6029A', 最后返回时间: '2015-4-1 15:28:58', 未返回时间: 3428 }
        // ... 其他数据
      ],
      startTime: '',
      endTime: '',
      maxCount: 100,
      tableData_result: [{ model: 'HXD2', number: '1506A', time: '2024-3-7 16:35', opinion: '',
        result: '', analyst: '', analyzeTime: '' }],
      dateRange: [],
      size: '',
      report: {
        model: 'HXD2',
        number: '2067B',
        date: '2024-2-29 17:06:02',
        faults: [
          { description: '自动撒沙切除发生1次。', times: ['2024-2-27 0:25:26'], suggestion: '建议检查撒沙系统。' },
          { description: '过分相装置关闭发生4次。', times: ['2024-2-11 1:12:20', '2024-2-9 9:54:15', '2024-1-12 2:47:49', '2024-2-26 10:41:47'], suggestion: '建议检查相装置。' }
        ]
      },
      tableData: [
        {
          type: 'HXD2',
          number: '2067B',
          date: '2024-02-29 17:06:02'
        }
      ],
      faultAnalysis: [
        '1. 自动撒沙切除发生 1次。发生时间: 2024-2-27 02:52:26',
        '2. 过分相装置关闭发生 4次。发生时间: 2024-2-11 11:12:20',
        '发生时间: 2024-2-9 9:54:15',
        '发生时间: 2024-1-12 2:47:49',
        '发生时间: 2024-2-26 10:41:47'
      ],
      reportDialogVisible: false,
      reportData: {
        carType: 'HXD2',
        carNumber: '2067B',
        preparationDate: '2024-2-29 17:06:02',
        analysisResults: [
          { description: '自动撒沙切除发生 1次。', time: '2024-2-27 0:25:36' },
          { description: '过分相装置关闭发生 4次。', time: '2024-2-11 1:12:20' }
          // 其他分析结果...
        ]
      },
      queryConditions: {
        carType: '',
        carNumber: '',
        startDate: '',
        endDate: ''
      },
      dialogVisible_dataout: false,
      dialogVisible_result: false,
      dialogVisible_date: false,
      dialogVisible_train: false,
      dialogVisible_overdue: false,
      dialogVisible_timebrow: false,
      dialogVisible_graph: false,
      dialogVisible: false,
      startDate: '',
      endDate: '',
      menuItems: [
        { label: '解析数据导出', index: '1-1', icon: 'el-icon-upload2' },
        { label: '筛选数据导出', index: '1-2', icon: 'el-icon-upload2' },
        { label: '定位数据导出', index: '1-3', icon: 'el-icon-upload2' },
        { label: '日报表', index: '1-4', icon: 'el-icon-date' },
        { label: '时间跨度报表', index: '1-5', icon: 'el-icon-s-claim' },
        { label: '机车报表', index: '1-6', icon: 'el-icon-s-order' },
        { label: '生成word图表', index: '1-7', icon: 'el-icon-document' },
        { label: '专家诊断报告', index: '1-8', icon: 'el-icon-s-custom' },
        { label: '自动显示', index: '1-9', icon: 'el-icon-s-platform' },
        { label: '时间', index: '1-10', icon: 'el-icon-alarm-clock' },
        { label: '按时间查询', index: '1-11', icon: 'el-icon-timer' },
        { label: '历史数据查询', index: '1-12', icon: 'el-icon-notebook-1' },
        { label: '逾期未回机车查询', index: '1-13', icon: 'el-icon-postcard' },
        { label: '按时间总体浏览', index: '1-14', icon: 'el-icon-orange' },
        { label: '结果确定', index: '1-15', icon: 'el-icon-discount' },
        { label: '图形分析', index: '1-16', icon: 'el-icon-pie-chart' },
        { label: '大数据分析', index: '1-17', icon: 'el-icon-s-data' },
        { label: '大数据分析', index: '1-18', icon: 'el-icon-upload2' }
      ],
      downloadStatuses: [
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        },
        {
          operator: '张三',
          downloadStatus: '下载中',
          downloadingModel: 'HXD3B-1234',
          downloadProgress: 30,
          dumpingModel: 'HXD3B-1234',
          dumpingStatus: '转储中',
          dumpingProgress: 50
        }
      ],
      downloadList: [
        {
          operator: '李四',
          downloadStatus: '已完成',
          downloadingModel: 'HXD3B-5678',
          downloadProgress: 100,
          dumpingModel: 'HXD3B-5678',
          dumpingStatus: '已完成',
          dumpingProgress: 100
        }
      ]
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    handleTabChange(tab) {
      console.log(tab)
    },
    filteredData() {
      return this.tableData.filter(item => item.未返回时间 >= this.searchForm.days)
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    onSearch() {
      // 重置搜索条件
      this.searchForm.days = 30
    },
    onQuery() {
      // 查询逻辑
      console.log('查询', this.startTime, this.endTime, this.maxCount)
    },
    handleDateRangeChange(value) {
      // 处理日期范围变化
    },
    search() {
      // 查询数据的逻辑
    },
    handleMenuItemClick(item) {
      if (item === '解析数据导出') {
        this.dialogVisible_dataout = true
      }
      if (item === '筛选数据导出') {
        this.dialogVisible_dataout = true
      }
      if (item === '定位数据导出') {
        this.dialogVisible_dataout = true
      }
      if (item === '按时间查询') {
        this.dialogVisible = true
      }
      if (item === '机车报表') {
        this.dialogVisible_train = true
      }
      if (item === '专家诊断报告') {
        this.reportDialogVisible = true
      }
      if (item === '日报表' || item === '时间') {
        this.dialogVisible_date = true
      }
      if (item === '结果确定') {
        this.dialogVisible_result = true
      }
      if (item === '逾期未回机车查询') {
        this.dialogVisible_overdue = true
      }
      if (item === '按时间总体浏览') {
        this.dialogVisible_timebrow = true
      }
      if (item === '大数据分析') {
        this.dialogVisible_graph = true
      }


    },
    updateDownloadStatus(status) {
      console.log('Download status updated:', status)
    },
    handleConfirm() {
      if (this.startDate > this.endDate) {
        this.$message.error('起始时间不能晚于终止时间！')
        return
      }
      console.log('Start Date:', this.startDate)
      console.log('End Date:', this.endDate)
      this.dialogVisible = false
      this.dialogVisible_train = false
    },
    handleClick() {
    },
    printReport() {
      // 获取报告内容的 HTML
      const content = document.getElementById('report-content').innerHTML

      // 创建一个新的窗口
      const newWindow = window.open('', '_blank')
      newWindow.document.write('<html><head><title>打印报告</title></head><body>')

      // 复制原始页面的样式到新窗口，以确保打印时样式一致
      const originalHead = document.head.innerHTML
      newWindow.document.write(originalHead)

      // 添加报告内容
      newWindow.document.write(content)

      // 结束 body 标签
      newWindow.document.write('</body></html>')

      // 必须等待新窗口加载完成才能调用 print 方法
      newWindow.document.close()
      newWindow.onload = function() {
        newWindow.print()
        newWindow.close()
      }
    }

  }
}
</script>

<style scoped>
.top-nav { background-color: #409EFF; color: #fff; text-align: center;
  line-height: 60px; font-size: 24px; }
.title { margin: 0; }
.sidebar { width: 220px !important; background-color: #545c64; color: #fff; height: 100%;
  transition: width 0.3s; }
.sidebar .el-menu { border-right: none; }
.main-content { background-color: #ffffff;  transition: padding 0.3s; }
/* 添加过渡效果 */
.el-menu-item:hover { background-color: #434a50 !important; }
/* 媒体查询调整侧边栏宽度 */
@media (max-width: 992px)
{ .sidebar { width: 150px !important; }
  .main-content { padding: 10px; } }
</style>
